import {Image, StyleSheet} from "react-native"
import {Text, TouchableOpacity, View} from "react-native-ui-lib"
import React from "react"
import {appStyles} from "../../styles/styles"
import navigator from "../../utils/navigator"
import {inject, observer} from "mobx-react"
import {commonStyles} from "../../configs/commonStyle"
import {Badge} from "react-native-elements"

/**
 * 游戏室标题
 */
@inject("userStore", "appStore")
@observer
export class Menu extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            gameId: this.props.gameId,
            audit2: this.props.audit2
        }
    }

    updateBadge=(audit2)=>{
        this.setState({audit2})
    }

    // 代理底部导航栏
    renderAgentFooter = () => {

        return (
            <View style={styles.footer}>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => navigator.navigate("UserSet")}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_persons.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>成员</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => navigator.goBack()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_home.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>主页</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => this.props.kefuDialogShow()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_service.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>客服</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => navigator.navigate("Review")}>
                    <View center>
                        <Image style={styles.menu_icon} source={require('../../images/ic_shenhe.png')}/>
                        <Text style={{...commonStyles.text_black_12}}>审核</Text>
                        {
                            this.state.audit2 > 0 ?
                                <Badge containerStyle={styles.badge} status="error" size={"5"}/>
                                : null
                        }
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    // 用户底部导航栏
    renderUserFooter = () => {
        const {gameId} = this.state
        return (
            <View style={styles.footer}>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => this.props.kefuDialogShow()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_service.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>客服</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem}
                                  onPress={() => this.props.renderXuanDanModalContent && this.props.renderXuanDanModalContent()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_xuandan.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>选单</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => navigator.goBack()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_home.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>主页</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem} onPress={() => {
                    navigator.navigate("UserNotOpen", {gameId});
                }}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_record.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>下注记录</Text>
                </TouchableOpacity>
                <TouchableOpacity center style={styles.navBarItem}
                                  onPress={() => this.props.onTouZhu()}>
                    <Image style={styles.menu_icon} source={require('../../images/ic_touzhu.png')}/>
                    <Text style={{...commonStyles.text_black_12}}>投注</Text>
                </TouchableOpacity>
            </View>
        )
    }

    render() {
        const {isAgent} = this.props.userStore
        if (isAgent) {
            return this.renderAgentFooter()
        }
        return this.renderUserFooter()
    };

}


const styles = StyleSheet.create({
    navBarItem: {
        flex: 1,
        ...appStyles.alignCenter
    },
    footer: {
        backgroundColor: "white",
        paddingVertical: 10,
        flexDirection: "row",
        justifyContent: "space-around",
        width: "100%"
    },
    badge: {
        position: "absolute",
        right: 0,
        top: 0
    },
    menu_icon: {width: 18, height: 18, marginBottom: 3},
})

